<template>
  <div class="commin-manage over-bg">
    <div class="title text-t1 text-left text-18 person-bg bdb-borderBase">
      {{ $t("global.contractManagement") }}
    </div>
    <div
      class="tab-box textperson-t3 person-bg flex js-st align-center point bdb-borderBase"
    >
      <div
        class="tab text-14"
        to="curent"
        @click="changeTab(1)"
        :class="{ 'textperson-t2 text-bold active-line': state.active === 1 }"
      >
        {{ $t("global.currentPosition") }}
      </div>
      <!-- <div
        class="tab text-14 textperson-t3"
        to="history"
        @click="changeTab(2)"
        :class="{ 'textperson-t2 text-bold active-line': state.active === 2 }"
      >
        {{ $t("global.currentCommission") }}
      </div> -->
      <div
        class="tab text-14 textperson-t3"
        to="history"
        @click="changeTab(3)"
        :class="{ 'textperson-t2 text-bold active-line': state.active === 3 }"
      >
        {{ $t("global.historyRecord") }}
      </div>
    </div>
    <div class="commin-list person-bg">
      <!-- <div class="header flex js-sp align-center mb-20">
        <div class="date">
          <el-date-picker
            v-model="state.date"
            format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange"
            :range-separator="$t('exchange.to')"
            :start-placeholder="$t('exchange.startDate')"
            :end-placeholder="$t('exchange.endDate')"
            @change="changeDate"
          ></el-date-picker>
        </div>
        <div
          class="select bd-borderBase flex js-sp align-center point"
          @click="select"
          v-clickout="outselect"
        >
          <span class="text-14 textperson-t3">
            {{
              state.currency_match === ""
                ? $t("exchange.tradingPair")
                : state.currency_match
            }}
          </span>
          <i class="el-icon-arrow-down textperson-t2"></i>
          <div class="curency-box person-bg point" v-if="state.isselect">
            <el-input :placeholder="$t('exchange.search')" v-model="input2">
              <template #append>
                <span class="personlink text-14">{{
                  $t("exchange.comfirm")
                }}</span>
              </template>
            </el-input>
            <div
              class="curency-singel textperson-t2 text-14 text-left"
              v-for="item in state.currency"
              :key="item.id"
              @click="
                chooseCurrency(item.id, item.currency_name, item.legal_name)
              "
            >
              {{ item.currency_name + "/" + item.legal_name }}
            </div>
          </div>
        </div>
        <div class style="width:140px">
          <el-select
            v-model="state.list_param.lever_type"
            :placeholder="$t('exchange.directionTip')"
          >
            <el-option
              v-for="item in state.options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div
          class="btn bd-borderBase textperson-t3 text-14 point"
          @click="Refresh"
        >
          {{ $t("exchange.reset") }}
        </div>
        <div
          class="btn share-color text-14 bgpersonlink point text-ellipsis"
          @click="onSubmit"
        >
          {{ $t("exchange.inquire") }}
        </div>
        <div>
          <el-checkbox v-model="state.list_param.hide_revoked">{{
            $t("exchange.hideRevoked")
          }}</el-checkbox>
        </div>
      </div> -->
      <!-- 表格 -->
      <div>
        <Currentposi
          v-if="state.active === 1"
          :tableData="state.tableData"
          @winclose="winclose"
          @close="getList"
        />
        <Currentcommin
          v-if="state.active === 2"
          @close="getList"
          @winclose="winclose"
          :tableData="state.tableData"
        />
        <Historycommin v-if="state.active === 3" :tableData="state.tableData" />
      </div>
      <Pagination
        :total="state.total"
        :size="state.list_param.limit"
        :current="state.currentPage"
        @currentchange="currentchange"
      />
    </div>

    <!-- 止盈止损弹窗 -->
    <el-dialog
      :title="$t('exchange.stopLoss')"
      v-model="state.dialog"
      width="400px"
    >
      <Stoploss
        v-if="state.dialog"
        :param="state.winloseParam"
        @close="closeWin"
      />
    </el-dialog>
  </div>
</template>

<script>
import { reactive, onMounted, watch, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import Currentcommin from "@/components/personModel/contract/curent.vue";
import Historycommin from "@/components/personModel/contract/history.vue";
import Currentposi from "@/components/personModel/contract/index.vue";
import { leverPage, currencyMatchList } from "@/api/currency";
import { demoleverPage } from "@/api/demo";
import { microtradeLists } from "@/api/assets";
import UseSystemSetting from "@/commonapi/useSystemSetting";
// import { formatDate } from "@/utils/times";
import Stoploss from "@/components/personModel/contract/stoploss.vue";
import Pagination from "@/components/pagination/index.vue";
import { useI18n } from "vue-i18n";
import { useStore } from "vuex";

export default {
  name: "Contract",
  components: {
    Currentcommin,
    Historycommin,
    Currentposi,
    Stoploss,
    Pagination,
  },
  setup() {
    const $route = useRoute();
    const $router = useRouter();
    const { t } = useI18n();
    const $store = useStore();
    const state = reactive({
      active: 1,
      dialog: false, //设置止盈止损
      list_param: { page: 1, limit: 100, hide_revoked: false },
      tableData: [],
      currentPage: 1,
      lever_status: 1,
      total: 0,
      options: [
        {
          value: 1,
          label: t("exchange.doMore"),
        },
        {
          value: 2,
          label: t("exchange.short"),
        },
      ],
      currency: [], // 币种
      currency_match: "",
      date: [],
      winloseParam: {},
    });
    const changeTab = (i) => {
      if (i) {
        state.active = i;
        $router.replace("/person/contract?active=" + i);
        $store.commit("user/SET_CONTRACTACTION", i);
        // Refresh();
      }
    };
    // 获取开关状态
    const { virtual_wallet } = UseSystemSetting();
    watch(
      () => virtual_wallet.value,
      () => {
        Refresh();
      }
    );
    const select = () => {
      state.isselect = true;
    };
    const outselect = () => {
      state.isselect = false;
    };
    // 获取列表
    const getList = () => {
      const data = { ...state.list_param };
      data.hide_revoked = state.list_param.hide_revoked;
      // data.page = state.currentPage - 1;
      data.match_id=3
      data.status=state.active
      // data.lever_status = state.active === 1 ? 2 : state.active === 2 ? 1 : 3;
      state.loading = true;
      // let setFun = virtual_wallet.value ? demoleverPage : leverPage;
      console.log('当前委托')
      let setFun = microtradeLists;
      setFun(data)
        .then((res) => {
          state.loading = false;
          state.tableData = res.data.data;
          state.total = res.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    };
    // 重置
    const Refresh = () => {
      state.currentPage = 1;
      state.list_param.hide_revoked = false;
      state.list_param.currency_match_id = null;
      state.currency_match = "";
      state.list_param.start_time = null;
      state.list_param.end_time = null;
      state.date = null;
      state.list_param.lever_type = null;
      getList();
    };
    // 获取所有交易对
    const getCurrency = () => {
      const data = {
        currency_match_type: 2,
      };
      currencyMatchList(data).then((res) => {
        state.currency = res.data;
      });
    };
    //选择交易对
    const chooseCurrency = (val, currency_name, legal_name) => {
      state.list_param.currency_match_id = val;
      state.currency_match = currency_name + "/" + legal_name;
      outselect();
    };
    // 选择时间
    const changeDate = () => {
      if (state.date) {
        state.list_param.start_time = new Date(state.date[0]).getTime();
        state.list_param.end_time = new Date(state.date[1]).getTime();
      } else {
        state.list_param.start_time = null;
        state.list_param.end_time = null;
      }
    };
    const onSubmit = () => {
      state.currentPage = 1;
      getList();
    };
    // 跳转到新页面
    const currentchange = (val) => {
      state.currentPage = val + 1;
      getList();
    };
    const getquery = computed(() => {
      return $route.query.active;
    });
    watch(getquery, (active) => {
      if (active) {
        state.active = Number(active);
        Refresh();
      }
    });
    watch(
      () => state.list_param.hide_revoked,
      (newData, oldData) => {
        console.log(oldData);
        state.list_param.hide_revoked = newData;
        state.currentPage = 1;
        getList();
      }
    );
    // 设置止盈止损
    const winclose = (item) => {
      state.winloseParam = { ...item };
      state.dialog = true;
    };
    // 关闭止盈止损
    const closeWin = () => {
      state.dialog = false;
      getList();
    };
    onMounted(() => {
      state.active = Number(getquery.value);
      console.log('getlist-----')
      getList();
      getCurrency();
    });
    return {
      state,
      changeTab,
      select,
      outselect,
      getList,
      Refresh,
      getCurrency,
      chooseCurrency,
      changeDate,
      onSubmit,
      currentchange,
      winclose,
      closeWin,
    };
  },
};
</script>

<style scoped lang="less">
.commin-manage {
  width: 100%;
}
.title {
  width: 100%;
  height: 65px;
  line-height: 65px;
  padding: 0 30px;
  font-family: PingFang SC;
  font-weight: bold;
  margin-bottom: 1px;
}
.tab-box {
  width: 100%;
  height: 48px;
  padding: 0 30px;
  box-sizing: border-box;
}
.tab {
  min-width: 56px;
  height: 100%;
  line-height: 48px;
  margin-inline-end: 30px;
  position: relative;
}
.commin-list {
  padding: 30px 20px;
  box-sizing: border-box;
}
.select {
  width: 140px;
  position: relative;
  padding: 0 12px;
  height: 40px;
}
.curency-box {
  position: absolute;
  width: 140px;
  height: 169px;
  left: 0;
  bottom: -170px;
  border-radius: 8px;
  box-shadow: 0 8px 10px rgba(0, 0, 0, 0.1);
  padding: 8px;
  box-sizing: border-box;
  z-index: 99;
  overflow-y: scroll;
}
.curency-box /deep/ .el-input__inner {
  border: none;
  background: #f8f8f8;
  .el-input-group__append {
    border: none;
  }
}
.curency-box /deep/ .el-input-group__append {
  width: 30px;
  border: none;
  padding-inline-end: 20px;
  background: #f8f8f8;
}
.curency-singel {
  width: 100%;
  height: 36px;
  line-height: 36px;
  padding-inline-start: 10px;
  box-sizing: border-box;
}
.curency-singel :hover {
  background: red;
}
.btn {
  width: 80px;
  height: 34px;
  line-height: 34px;
}
.date /deep/.el-range-editor.el-input__inner {
  width: 314px;
}
.mb-20 {
  margin-bottom: 20px;
}
</style>
<style lang="less">
.el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: @blue;
  border-color: @blue;
}
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: @blue;
}
.el-date-editor .el-range-separator {
  width: 15%;
}
</style>
